<template>
  <div class="patient-dashboard">
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 顶部导航 -->
      <div class="top-nav">
        <div class="profile-section">
          <div class="user-avatar">
            <img src="@/assets/病人.png" alt="Patient" />
          </div>
          <h2 class="page-title">患者档案</h2>
        </div>
        <div class="nav-actions">
          <el-button class="nav-button" circle>
            <el-icon><User /></el-icon>
          </el-button>
          <el-button class="nav-button" circle>
            <el-icon><Bell /></el-icon>
          </el-button>
        </div>
      </div>

      <!-- 患者信息卡片 -->
      <div class="patient-info-card">
        <div class="card-content">
          <div class="patient-header">
            <h3>患者信息</h3>
            <div class="action-buttons">
              <el-button type="danger" size="small" @click="showPatientList">患者列表</el-button>
              <el-button type="primary" size="small" @click="handleAddPatient">添加患者</el-button>
            </div>
          </div>
          
          <div class="patient-details">
            <!-- 患者头像区域 -->
            <div class="patient-avatar-section">
              <div class="avatar-container">
                <img :src="currentPatient.avatar || '/src/assets/病人.png'" alt="Patient Avatar" />
              </div>
            </div>
            
            <!-- 患者信息区域 -->
            <div class="patient-info-section">
              <div class="info-group">
                <h4>关于患者</h4>
                <p class="info-text">{{ currentPatient.description || '暂无详细信息' }}</p>
              </div>
              
              <div class="info-row">
                <div class="info-item">
                  <h4>邮箱</h4>
                  <p class="info-text">{{ currentPatient.email || 'patient@example.com' }}</p>
                </div>
                <div class="info-item">
                  <h4>电话号码</h4>
                  <p class="info-text">{{ currentPatient.phone || '+86 138 0000 0000' }}</p>
                </div>
                <div class="info-item">
                  <h4>地址</h4>
                  <p class="info-text">{{ currentPatient.address || '暂无地址信息' }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 就诊历史和健康报告 -->
      <div class="bottom-section">
        <!-- 就诊历史 -->
        <div class="visit-history-card">
          <h3>就诊历史</h3>
          <div class="table-header">
            <span>日期</span>
            <span>医生</span>
            <span>治疗</span>
            <span>费用</span>
            <span>操作</span>
          </div>
          <div class="table-content">
            <div v-for="(visit, index) in visitHistory" :key="index" class="table-row">
              <span>{{ visit.date }}</span>
              <span>{{ visit.doctor }}</span>
              <span>{{ visit.treatment }}</span>
              <span class="cost">¥{{ visit.cost }}</span>
              <div class="actions">
                <el-button type="primary" size="small" circle @click="editVisit(visit)">
                  <el-icon><Edit /></el-icon>
                </el-button>
                <el-button type="danger" size="small" circle @click="deleteVisit(visit)">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 健康报告 -->
        <div class="health-report-card">
          <h3>健康报告</h3>
          <div class="health-metrics">
            <div class="metric-item" v-for="metric in healthMetrics" :key="metric.name">
              <div class="metric-header">
                <span class="metric-name">{{ metric.name }}</span>
                <span class="metric-value">{{ metric.value }}</span>
              </div>
              <div class="progress-bar">
                <div class="progress-background"></div>
                <div 
                  class="progress-fill" 
                  :style="{ width: metric.percentage + '%', backgroundColor: metric.color }"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <div class="admin-avatar">
          <img src="@/assets/医生.png" alt="Admin" />
        </div>
        <div class="admin-info">
          <h4>张医生</h4>
          <p>管理员</p>
        </div>
      </div>
      
      <nav class="sidebar-nav">
        <div class="nav-item active">
          <div class="nav-icon dashboard-icon">
            <div class="icon-grid">
              <div class="grid-item"></div>
              <div class="grid-item"></div>
              <div class="grid-item"></div>
              <div class="grid-item active"></div>
            </div>
          </div>
        </div>
        <div class="nav-item" @click="goToAppointments">
          <el-icon class="nav-icon"><Calendar /></el-icon>
          <span>预约管理</span>
        </div>
        <div class="nav-item" @click="goToDoctors">
          <el-icon class="nav-icon"><User /></el-icon>
        </div>
        <div class="nav-item">
          <el-icon class="nav-icon"><Setting /></el-icon>
        </div>
        <div class="nav-item">
          <el-icon class="nav-icon"><Money /></el-icon>
        </div>
        <div class="nav-item">
          <el-icon class="nav-icon"><UserFilled /></el-icon>
        </div>
        <div class="nav-item logout">
          <el-icon class="nav-icon"><SwitchButton /></el-icon>
        </div>
      </nav>
    </div>

    <!-- 患者列表对话框 -->
    <el-dialog v-model="showPatientDialog" title="患者列表" width="80%" :before-close="closePatientDialog">
      <el-table :data="patientList" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="gender" label="性别" width="80" />
        <el-table-column prop="age" label="年龄" width="80" />
        <el-table-column prop="phone" label="电话" width="150" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" @click="selectPatient(scope.row)">选择</el-button>
            <el-button size="small" type="primary" @click="editPatient(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deletePatient(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  User, Bell, Edit, Delete, Calendar, Setting, Money, 
  UserFilled, SwitchButton 
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const showPatientDialog = ref(false)
const currentPatient = reactive({
  name: '李小明',
  avatar: '',
  description: '这是一个示例患者档案。患者为45岁男性，患有轻度高血压，定期进行体检和药物治疗。建议保持健康的生活方式，包括适量运动和均衡饮食。',
  email: 'lixiaoming@example.com',
  phone: '+86 138 0000 0000',
  address: '上海市浦东新区张江高科技园区科苑路123号'
})

const visitHistory = ref([
  {
    date: '2024-01-12',
    doctor: '王医生',
    treatment: '常规检查',
    cost: '145'
  },
  {
    date: '2024-01-12',
    doctor: '王医生',
    treatment: 'X光检查',
    cost: '52'
  },
  {
    date: '2024-01-12',
    doctor: '王医生',
    treatment: '血液检查',
    cost: '52'
  }
])

const healthMetrics = ref([
  {
    name: '心率',
    value: '93',
    percentage: 75,
    color: '#CA79C6'
  },
  {
    name: '血压',
    value: '89',
    percentage: 70,
    color: '#79CFA6'
  },
  {
    name: '血糖',
    value: '60',
    percentage: 60,
    color: '#77BEEB'
  },
  {
    name: '血红蛋白',
    value: '80%',
    percentage: 80,
    color: '#FF706F'
  }
])

const patientList = ref([
  {
    id: 1,
    name: '李小明',
    gender: '男',
    age: 45,
    phone: '+86 138 0000 0000',
    email: 'lixiaoming@example.com'
  },
  {
    id: 2,
    name: '王小花',
    gender: '女',
    age: 32,
    phone: '+86 139 0000 0000',
    email: 'wangxiaohua@example.com'
  },
  {
    id: 3,
    name: '张三',
    gender: '男',
    age: 28,
    phone: '+86 137 0000 0000',
    email: 'zhangsan@example.com'
  }
])

// 方法
const showPatientList = () => {
  showPatientDialog.value = true
}

const closePatientDialog = () => {
  showPatientDialog.value = false
}

const handleAddPatient = () => {
  ElMessage.info('添加患者功能开发中...')
}

const selectPatient = (patient) => {
  Object.assign(currentPatient, patient)
  showPatientDialog.value = false
  ElMessage.success(`已选择患者：${patient.name}`)
}

const editPatient = (patient) => {
  ElMessage.info(`编辑患者：${patient.name}`)
}

const deletePatient = (patient) => {
  ElMessageBox.confirm(
    `确定要删除患者 ${patient.name} 吗？`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    const index = patientList.value.findIndex(p => p.id === patient.id)
    if (index > -1) {
      patientList.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

const editVisit = (visit) => {
  ElMessage.info(`编辑就诊记录：${visit.treatment}`)
}

const deleteVisit = (visit) => {
  ElMessageBox.confirm(
    `确定要删除这条就诊记录吗？`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    const index = visitHistory.value.findIndex(v => v === visit)
    if (index > -1) {
      visitHistory.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

const goToAppointments = () => {
  router.push('/register')
}

const goToDoctors = () => {
  router.push('/doctor/manage')
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
/* 引入Kanit字体 */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&display=swap');

.patient-dashboard {
  display: flex;
  min-height: 100vh;
  background: linear-gradient(135deg, #D8D2FC 0%, #FDE2E0 28.35%, #E6E4EA 58.79%, #E0E9F4 100%);
  font-family: 'Kanit', 'Microsoft YaHei', sans-serif;
}

.main-content {
  flex: 1;
  padding: 20px;
  margin-left: 220px;
}

.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.profile-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(216, 210, 252, 0.64);
  background: white;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-title {
  font-size: 42px;
  font-weight: 500;
  color: #271E4A;
  margin: 0;
}

.nav-actions {
  display: flex;
  gap: 10px;
}

.nav-button {
  width: 48px;
  height: 48px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 4px 15px rgba(216, 210, 252, 0.64);
  border: none;
}

.patient-info-card {
  background: white;
  border-radius: 47px;
  box-shadow: 0 4px 15px rgba(216, 210, 252, 0.64);
  padding: 40px;
  margin-bottom: 30px;
}

.patient-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.patient-header h3 {
  font-size: 24px;
  font-weight: 500;
  color: #271E4A;
  margin: 0;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.action-buttons .el-button {
  border-radius: 5px;
  font-weight: 600;
  font-size: 14px;
}

.patient-details {
  display: flex;
  gap: 40px;
}

.patient-avatar-section {
  flex-shrink: 0;
}

.avatar-container {
  width: 225px;
  height: 225px;
  border-radius: 47px;
  overflow: hidden;
  background: #f0f0f0;
  border: 2px solid #000;
}

.avatar-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.patient-info-section {
  flex: 1;
}

.info-group {
  margin-bottom: 30px;
}

.info-group h4,
.info-item h4 {
  font-size: 18px;
  font-weight: 500;
  color: #271E4A;
  margin: 0 0 10px 0;
}

.info-text {
  font-size: 16px;
  font-weight: 300;
  color: rgba(39, 30, 74, 0.8);
  margin: 0;
  line-height: 1.5;
}

.info-row {
  display: flex;
  gap: 40px;
}

.info-item {
  flex: 1;
}

.bottom-section {
  display: flex;
  gap: 30px;
}

.visit-history-card,
.health-report-card {
  background: white;
  border-radius: 47px;
  box-shadow: 0 4px 15px rgba(216, 210, 252, 0.64);
  padding: 30px;
}

.visit-history-card {
  flex: 1;
}

.health-report-card {
  width: 400px;
}

.visit-history-card h3,
.health-report-card h3 {
  font-size: 24px;
  font-weight: 500;
  color: #271E4A;
  margin: 0 0 20px 0;
}

.table-header {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  background: #EDF4FC;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 300;
  color: #271E4A;
  opacity: 0.9;
  margin-bottom: 10px;
}

.table-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(185, 178, 226, 0.64);
  font-size: 14px;
  color: #271E4A;
}

.table-row:not(:last-child) {
  border-bottom: 1px solid #E0E9F4;
}

.cost {
  font-weight: 500;
}

.actions {
  display: flex;
  gap: 10px;
}

.actions .el-button {
  width: 30px;
  height: 30px;
}

.health-metrics {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.metric-item {
  margin-bottom: 20px;
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.metric-name {
  font-size: 18px;
  font-weight: 500;
  color: #271E4A;
}

.metric-value {
  font-size: 16px;
  font-weight: 400;
  color: rgba(39, 30, 74, 0.8);
}

.progress-bar {
  position: relative;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
}

.progress-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #E0E9F4;
}

.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100vh;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.sidebar-header {
  text-align: center;
}

.admin-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 15px;
  box-shadow: 0 4px 15px rgba(216, 210, 252, 0.64);
  background: white;
}

.admin-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-info h4 {
  font-size: 18px;
  font-weight: 400;
  color: #271E4A;
  margin: 0;
  line-height: 1.3;
}

.admin-info p {
  font-size: 18px;
  font-weight: 400;
  color: #271E4A;
  margin: 0;
  line-height: 1.3;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  box-shadow: 0 4px 15px rgba(216, 210, 252, 0.64);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
}

.nav-item.active {
  background: white;
  box-shadow: 0 6px 20px rgba(216, 210, 252, 0.8);
}

.nav-item.logout {
  margin-top: auto;
}

.nav-icon {
  width: 26px;
  height: 26px;
  color: #271E4A;
}

.dashboard-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 20px;
  height: 20px;
}

.grid-item {
  width: 8px;
  height: 8px;
  border: 2px solid #271E4A;
  border-radius: 6px;
  background: transparent;
}

.grid-item.active {
  background: #FFDBD9;
}

.nav-item span {
  font-size: 18px;
  font-weight: 400;
  color: #271E4A;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    margin-left: 80px;
  }
  
  .sidebar {
    width: 80px;
    padding: 20px 10px;
  }
  
  .sidebar-header .admin-info,
  .nav-item span {
    display: none;
  }
  
  .nav-item {
    justify-content: center;
    padding: 15px;
  }
}

@media (max-width: 768px) {
  .main-content {
    margin-left: 0;
    padding: 15px;
  }
  
  .sidebar {
    display: none;
  }
  
  .patient-details {
    flex-direction: column;
    gap: 20px;
  }
  
  .bottom-section {
    flex-direction: column;
  }
  
  .health-report-card {
    width: 100%;
  }
  
  .info-row {
    flex-direction: column;
    gap: 20px;
  }
}
</style>